
{extend name=".././view/list.html" /}
{block name="jsset"}
{load href="__STATIC__/echarts/echarts.js" /}
{load href="__STATIC__/echarts/infographic.js" /}
{/block}
{block name="nav"}
<span class="layui-breadcrumb">
	<a href="">考试管理</a>
	<a href="">更多操作</a>
	<a href="">成绩查看</a>
	<a href="">各班级成绩统计表</a>
	<a><cite>{$list['kaoshititle']}</cite></a>
</span>
{/block}
{block name="search"}
<div class="layui-form-item">
	<label for="school" class="layui-form-label" style="height: 100%">学校</label>
	<div class="layui-input-block">
		<input type="radio" name="school_id" title="无" value="" checked="true" lay-skin="primary" >
		{volist name="$list.school_id" id="vo"}
		<input type="radio" name="school_id" title="{$vo.jiancheng}" value="{$vo.id}" lay-skin="primary" >
		{/volist}
	</div>
</div>
<div class="layui-form-item">
	<label for="ruxuenian" class="layui-form-label" style="height: 100%">年级 </label>
	<div class="layui-input-block" pane>
		{volist name="$list.nianji" id="vo"}
  		<input type="radio" name="ruxuenian" title="{$vo.nianjiname}" value="{$vo.ruxuenian}" lay-skin="primary" {eq name="i" value="1" }
  		checked="true"
  		{/eq}>
		{/volist}
	</div>
</div>
<div class="layui-form-item" style="margin-bottom: 0;">
	<label for="banji_id" class="layui-form-label" style="height: 100%">班级</label>
	<div class="layui-input-block" id="banji_id">
	</div>
</div>
<input type="hidden" name="kaoshi_id" value="{$list.kaoshi_id}">
{/block}
{block name="table"}
  <table id="tabledemo" lay-filter="mytable" lay-size="sm"></table>
{/block}
{block name="echart"}
<!-- <div class="layui-row" style="padding-top: 80px;"> -->
	<div class="layui-col-xs6" style="width: 100%;height:400px;" id="myAvg"></div>
	<div class="layui-col-xs6" style="width: 100%;height:400px;" id="myJige"></div>
	<div class="layui-col-xs6" style="width: 100%;height:400px;" id="myYouxiu"></div>
	<div class="layui-col-xs6" style="width: 100%;height:400px;" id="myBiaozhunca"></div>
	<div class="layui-col-xs6" style="width: 100%;height:400px;" id="myXiangti"></div>
  <!-- </div> -->
{/block}
{block name="myjs"}
  <!-- 表格上面按钮模板 -->
  <script type="text/html" id="toolbarDemo">
   <div class="layui-btn-container">
<!-- 		<button class="layui-btn layui-btn-danger" lay-event="dels">
			<i class="iconfont">&#xe69d;</i> 批量删除
		</button> -->
		<button class="layui-btn" lay-event="download">
			<i class="layui-icon layui-icon-download-circle"></i> 下载
		</button>
	</div>
</script>
<!-- 记录操作按钮模板 -->
<script type="text/html" id="barDemo">
	<a class="layui-btn-xs" lay-event="edit" title="编辑"><i class="layui-icon">&#xe642;</i></a>
	<a class="layui-btn-xs" lay-event="del" title="删除"><i class="layui-icon">&#xe640;</i></a>
</script>
<!-- 表格操作 -->
<script>
	// 设置列
  	options.cols=[[ //表头
    	{type:'numbers',title:'序号',rowspan:2},
    	{field: 'school_jiancheng', title: '学校',sort: false,minWidth:80,rowspan:2},
    	{field: 'banji_title', title: '班级',sort: false,minWidth:100,rowspan:2},
    ]
    ,[]
    ];
	// 获取学科
	var xk = '<?php echo json_encode($list["subject_id"]);?>';
	xk = eval(decodeURIComponent(xk));
	var xiangmu = {cjCnt:'人数',avg:'平均分',jige:'及格率%',youxiu:'优秀率%'};		// 要显示哪些统计结果

	$.each(xk,function(index,value){
		options.cols[0].push({title: xk[index].title+'('+xk[index].fenshuxian.manfen+')',colspan:4,align:'center'});
		$.each(xiangmu,function(i,val){
			var colname = xk[index].lieming;
    		var colinfo = {
    			title:val
    			,minWidth:100
    			,templet:function(d){
    				var str = "";
    				if(d.chengji)
    				{
    				  if(d.chengji[colname])
              {
                str = d.chengji[colname][i];
              }
            }
            return str;
          }
        };
        options.cols[1].push(colinfo);
      });
    });
  	options.cols[0].push({title: '全科及格率%',minWidth:100,rowspan:2,templet:function(d){
  		var str = d.quanke.jige;
  		return str;
  	}});
  	options.cols[0].push({ title: '总平均分',minWidth:100,rowspan:2,templet:function(d){
  		var str = d.quanke.avg;
  		return str;
  	}});

  // 提交搜索条件后重载表格
  layui.use(['table','cjgl'],function(){
  	var table = layui.table
  	cjgl = layui.cjgl
  	form = layui.form;

    // 添加班级
    addBanji();
    loadTubiao()
    //表头工具栏事件
    table.on('toolbar(mytable)', function(obj){
      switch(obj.event){
       case 'dels':
          break;
	        var checkStatus = table.checkStatus('mytable'); //idmytable 即为基础参数 id 对应的值
	        cjgl.delAll(checkStatus,'/school','mytable');
	        break;
	        case 'add':
	        cjgl.add('添加单位','/school/create','650','500');
	        break;
	        case 'download':
	        cjgl.add('下载成绩','/chengji/bjtj/dwbiaoge/' + "{$list.kaoshi_id}",'650','300');
	        break;
       };
     });

    //监听行工具条
    table.on('tool(mytable)', function(obj){
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        switch(layEvent){
        	case 'detail':// 查看
          layer.msg('查看' + data.id);
          break;
        	case 'del':// 删除
          cjgl.del(obj,"/school");
          break;
        	case 'edit':// 编辑
          cjgl.add('编辑单位','/school/'+obj.data.id+'/edit','650','500');
          break;
        	case 'status':// 状态
          cjgl.status(obj,"{:url('setstatus')}");
          break;
        };
      });

    // 监听表单提交
    form.on('radio', function(data){
      addBanji();
      loadTubiao()
      $("#srcsubmit").click();
    });

  	// 监听表单提交
  	form.on('checkbox', function(data){
      checkall = $(data.elem).attr('checkall');
          parentId = $(data.elem).parents("div").attr('id');
          if(checkall == 'p'){
            cjgl.checkboxAll(parentId, data.elem.checked);
            loadTubiao();
            $("#srcsubmit").click();
            return true;
          }else if(checkall == 'c'){
            cjgl.checkboxParentList(parentId);
            loadTubiao();
            $("#srcsubmit").click();
            return true;
          }
    });

    // 加载图表
    function loadTubiao()
    {
      getAvg();
      getJige();
      getYouxiu();
      getBiaozhucha();
      getChayi();
    }

  	// 添加班级列表
    function addBanji(){
        // 获取参数
        var formval;
        formval = formval = form.val("search");
        if(formval.school_id == '')
        {
        	$('#banji_id').children().remove();
        }else{
        	cjgl.createCheckbox('banji_id', formval, '/tools/kscy/class', 'banji_id', 'banTitle');
        }
    }

    // 条形统计图--平均分
    function getAvg(){
      var id = 'myAvg';
      var url = '/chengji/bjtj/myavg';
      var val = form.val('search');
      val.xiangmu = 'avg';
      var title = '平均分';
      createTiaoxing(id, url, val, title);
    }

    // 条形统计图--及格率
    function getJige(){
      var id = 'myJige';
      var url = '/chengji/bjtj/myavg';
      var val = form.val('search');
      val.xiangmu = 'jige';
      var title = '及格率';
      createTiaoxing(id, url, val, title);
    }

    // 条形统计图--优秀率
    function getYouxiu(){
      var id = 'myYouxiu';
      var url = '/chengji/bjtj/myavg';
      var val = form.val('search');
      val.xiangmu = 'youxiu';
      var title = '优秀率';
      createTiaoxing(id, url, val, title);
    }

    // 条形统计图--标准差
    function getBiaozhucha(){
      var id = 'myBiaozhunca';
      var url = '/chengji/bjtj/myavg';
      var val = form.val('search');
      val.xiangmu = 'biaozhuncha';
      var title = '标准差';
      createTiaoxing(id, url, val, title);
    }

    // 箱线图--差异
    function getChayi(){
      var id = 'myXiangti';
      var url = '/chengji/bjtj/myxiangti';
      var val = form.val('search');
      var title = '差异';
      createXiangti(id, url, val, title);
    }

    // 折线统计图--分数段
    function getFenshuduan(subjectObj){
      var id = 'myFenshuduan' + subjectObj.lieming;
      var url = '/chengji/bjtj/myfenshuduan';
      var val = form.val('search');
      var title = subjectObj.title + '分数段统计';
      val['subject_id'] = subjectObj.id;
      createFenshuduan(id, url, val, title);
    }

  });


  /**
    * 异步获取图表中的数据
    *
    * @access public
    * @param id 要添加数据的div
    * @param url 异步地址
    * @param val 异步时携带的参数
    * @param val 图表标题
    * @return array 返回类型
    */
    function createTiaoxing(id, url, val, title)
    {
      var myTiaoxing = echarts.init(document.getElementById(id), 'infographic');
      $.post(url,val).done(function (data) {
        myTiaoxing.setOption({
          title:{
            text:title,
            left: 'center',
          },
          legend: {
            top: '10%',
          },
          grid: {
            left: '10%',
            top: '20%',
            right: '10%',
            bottom: '15%'
          },
          tooltip: {
            show: true,
            axisPointer: {
              type: 'cross'
            }
          },
          toolbox: {
            id:id,
            show:true,
            orient:'horizontal',
            showTitle:true,
            feature: {
              restore: { //重置
                show: true
              },
              saveAsImage: { //保存文件
                show: true
              },
            },
          },
          dataset: {
            source:data.data
          },
          xAxis: {type: 'category'},
          yAxis: {},
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              show: true,
              height: 20,
              type: 'slider',
              top: '90%',
              xAxisIndex: [0],
              start: 0,
              end: 100
            }
          ],
          series: data.series,
        });
    });
   }


  	/**
    * 异步获取箱线图表中的数据
    *
    * @access public
    * @param id 要添加数据的div
    * @param url 异步地址
    * @param val 异步时携带的参数
    * @param title 图表标题
    * @return array 返回类型
    */
    function createXiangti(id, url, val, title)
    {
    	$.post(url,val).done(function (data) {
       axisData = data.axisData;
       category = data.category;
       boxData = data.boxData;
       myseries = Array();

       for(var i in category)
       {
        myseries.push({
         'name':category[i],
         'type':'boxplot',
         'data':boxData[i],
         'tooltip':{formatter: formatter},
       });
      }

			// 设置初始值
      option = {
       title: {
         text: title,
         left: 'center',
       },
       legend: {
         top: '10%',
			        // data:
           },
           tooltip: {
             trigger: 'item',
             axisPointer: {
               type: 'shadow'
             }
           },
           toolbox: {
            id:id,
            show:true,
            orient:'horizontal',
            showTitle:true,
            feature: {
	                    restore: { //重置
                      show: true
                     },
	                    saveAsImage: { //保存文件
                      show: true
                     },
                   },
                 },
                 grid: {
                   left: '10%',
                   top: '20%',
                   right: '10%',
                   bottom: '15%'
                 },
                 xAxis: {
                   type: 'category',
                   data: axisData,
                   boundaryGap: true,
                   nameGap: 30,
                   splitArea: {
                     show: true
                   },
                   axisLabel: {
			            // formatter: 'expr {value}'
               },
               splitLine: {
                 show: false
               }
             },
             yAxis: {
               type: 'value',
               name: '得分',
			        // min: -400,
			        // max: 600,
			        splitArea: {
               show: false
             }
           },
           dataZoom: [
           {
             type: 'inside',
             start: 0,
             end: 100
           },
           {
             show: true,
             height: 20,
             type: 'slider',
             top: '90%',
             xAxisIndex: [0],
             start: 0,
             end: 100
           }
           ],
           series: myseries,
         };

         var myXiangti = echarts.init(document.getElementById(id), 'infographic');
         myXiangti.setOption(option);
       });
    }

    function formatter(param) {
     return [
     param.name,
     '最低分: ' + param.data[1],
     '25%: ' + param.data[2],
     '50%: ' + param.data[3],
     '75%: ' + param.data[4],
     '最高: ' + param.data[5]
     ].join('<br/>');
   }


 </script>
 {/block}
